<!-- home - 主页 -->
<template>
    <div class="home-page">
        <!-- 头部 - logo -->
        <div class="home-page-header">
            <div @dblclick="handleDbclick" class="logo-img"></div>
            <div class="logo-text">工器具管理系统</div>
            <div @click="handleClickLogin" class="login">{{loginTitle}}</div>
        </div>
        <!-- 菜单 -->
        <div class="home-page-menus">
            <div 
            class="menu"
            :title="item.label"
            v-for="item in menus"
            :key="item.id"
            @click="handleRouteClick(item)">
                <menu-item :imgSrc="item.imgSrc"></menu-item>
            </div>
        </div>
        <!-- 底部设置 -->
        <div class="home-page-footer">
            <!-- 配置ip -->
            <div
            @click="setIp"
            class="set-ip">
                配置IP
            </div>
            <div @click="$router.push('/set')" class="set">设置</div>
        </div>

        <!-- 配置IP对话框 -->
        <el-dialog 
        width="80%"
        title="配置IP" 
        :close-on-click-modal="false"
        :visible.sync="setIpVisible">
            <sys-set></sys-set>
        </el-dialog>
        

        <!-- 设置对话框弹出 -->
        <el-dialog 
        width="60%"
        title="设置" 
        :close-on-click-modal="false"
        :visible.sync="setVisible">
            <el-button
            type="primary"
            @click="exitFullScreen">
                退出全屏
            </el-button>
            <el-button
            @click="openDevTools"
            type="primary">
                打开开发者工具
            </el-button>
        </el-dialog>

    </div>
</template>

<script>
import {
    getAllDevs,
    doLoginOut
} from '@/apis';
import { ipcRenderer} from 'electron';
export default {
    name: 'home',
    components: {
        'menu-item': () => import('./menu-item.vue'),
        'sys-set': () => import('@/components/set/sys-set'),

    },
    props: {},
    data () {
        // 三个菜单
        this.menus = [{
            id: 0,
            label: '工器具出库',
            imgSrc: require('../../assets/out.png'),
            path: '/out-store'
        },{
            id: 1,
            label: '工器具入库 ',
            imgSrc: require('../../assets/in.png'),
            path: '/in-store'
        },{
            id: 2,
            label: '出入库记录',
            imgSrc: require('../../assets/record.png'),
            path: '/store-record'
        }]
        return {
            loginTitle: '登录',
            loading: null,
            setVisible: false,
            setIpVisible: false
        }
    },
    methods: {
        // 配置IP
        setIp () {
            this.setIpVisible = true;
        },
        // 缩小窗口
        minimizeWin(){
            ipcRenderer.send('window-min') // 通知主进程我要进行窗口最小化操作
        },
        // 点击菜单跳转页面
        handleRouteClick (item) {
            let {
                id,
                path
            } = item;
            // 只有出库和出入库记录需要强制登陆
            if ((id == 0 || id == 2) && window.sessionStorage.getItem('token')) {
                this.$router.replace(path).catch(e => {console.log(e)})
            } else {
                this.$router.push(path).catch(e => {console.log(e)})
            }
        },

        // 请求所有的工器具列表
        // 获取所有设备
        async getallDevs () {
            try {
                let id = window.localStorage.getItem('organizationId');// 99
                if (!Number(id)) return;
                let res = await getAllDevs(id);
                console.log('获取所有设备', res);
                let {
                    code,
                    msg,
                    data
                } = res.data;
                if (code == 200) {
                    let str = JSON.stringify(data);
                    sessionStorage.setItem('devs', str);
                } else if (code == -2) {
                    this.$message({
                        type: 'error',
                        message: `${msg}`
                    })
                    this.$store.commit('CLEAR_LOGIN');
                    this.$router.push('/login').catch({});    
                } else {
                    this.$message({
                        type: 'error',
                        message: `${msg}`
                    })
                }
            } catch(e) {
                console.log('getAllDevs',e)
            }
        },

        // 点击登录或者是退出登录
        handleClickLogin () {
            if (this.loginTitle == '登录') {
                this.$router.push('/login').catch({})
            } else {
                this.$confirm('确认要退出登录吗？')
                .then(_ => {
                    this.handleLogOut();
                })
                .catch(_ => {
                    console.log(_)
                });
            }
            // else if (this.loginTitle == '退出') {
            //     this.handleLogOut();
            // }
        },

        // 退出登录
        handleLogOut () {
            this.requestLogOut();
        },

        // 退出登录
        async requestLogOut () {
            try {
                this.openLoading();
                let res = await doLoginOut();
                console.log('退出登录', res);
                let {
                    code,
                    msg
                } = res.data;
                if (code == 200) {
                    this.$store.commit('CLEAR_LOGIN');
                    this.loginTitle = '登录';
                    this.loading.close();
                } else if (code == -2) {
                    this.$message({
                        type: 'error',
                        message: `${msg}`
                    })
                    this.$store.commit('CLEAR_LOGIN');
                    this.$router.push('/login').catch({});  
                    this.loading.close();  
                } else {
                    this.$message({
                        type: 'error',
                        message: `${msg}`
                    });
                    this.loading.close();
                }
            } catch(e) {
                this.loading.close();
                console.log('退出登录',e)
            }
        },

        // 退出loading
        openLoading () {
          this.loading = this.$loading({
            lock: true,
            text: '正在退出...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
            });
        },

        // 双击按钮实现退出全屏
        handleDbclick(){
            this.setVisible = true;
        },

        // 打开开发者工具
        openDevTools () {
            ipcRenderer.send('open-dev');
            this.setVisible = false;
        },

        // 退出全屏
        exitFullScreen () {
            this.minimizeWin();
            this.setVisible = false;
        }
    },
    created () {
        this.getallDevs();
        if (sessionStorage.getItem('token')) {
            let user = sessionStorage.getItem('user')
            this.loginTitle = user
        } else {
            this.loginTitle = '登录'
        }
    }
}
</script>
<style lang='scss'>
.home-page {
    width: 100%;
    height: 100%;
    background: url('../../assets/bg.png') no-repeat center center;
    background-size: cover;
    position: relative;

    &-header {
        width: 100%;
        height: 132px;
        padding: 70px 80px 0 80px;
        box-sizing: border-box;
        overflow: hidden;

        .logo-img {
            width: 53px;
            height: 53px;
            background: url('../../assets/logo-tool.png') no-repeat center center;
            background-size: 100% 100%;
            margin-top: 4px;
            margin-right: 16px;
            float: left;      
        }

        .logo-text {
            font-size: 44px;
            color: #FFFFFF;
            letter-spacing: 0;
            font-weight: 600;
            line-height: 62px;
            float: left;
        }

        .login {
            float: right;
            // width: 132px;
            padding: 0 36px;
            height: 62px;
            background: url('../../assets/icon_signin.png') left center no-repeat;
            text-align: right;
            line-height: 62px;
            font-size: 44px;
            color: #FFFFFF;
            letter-spacing: 0;
            font-weight: 400;
            cursor: pointer;
        }
    }

    &-menus {
        width: 100%;
        height: calc(100% - 249px);
        display: flex;
        justify-content: space-evenly;
        align-items: center;

        .menu {
            flex: 0 1 25%;
            height: 70%;
            cursor: pointer;
            transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);

            &:hover {
                transform: scale(1.2);
            }
        }
        
    }

    &-footer {
        width: 100%;
        height: 117px;
        padding: 0 80px 55px 80px;
        box-sizing: border-box;
        overflow: hidden;

        .set {
            float: right;
            width: 130px;
            height: 62px;
            background: url('../../assets/icon_set.png') left center no-repeat;
            text-align: right;
            line-height: 62px;
            font-size: 44px;
            color: #FFFFFF;
            letter-spacing: 0;
            font-weight: 400;
            cursor: pointer;
        }

        .set-ip {
            width: 130px;
            height: 62px;
            line-height: 62px;
            float: left;
            color: #fff;
            font-size: 36px;
            cursor: pointer;
        }
    }

    .el-dialog__title {
        font-size: 32px;
        line-height: 40px;
        color: #333;
    }

}

</style>